<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>添加地址 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      min-height: 100vh;
      margin: 0;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    .nav-btn.primary {
      color: #2196f3;
      font-weight: 500;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #2196f3;
      color: white;
    }
    
    /* 通用地址页面样式 */
    .address-page {
      display: none;
      padding: 15px;
    }
    
    .address-page.active {
      display: block;
    }
    
    /* 地址列表 */
    .address-list {
      background-color: #fff;
      border-radius: 12px;
      margin-bottom: 15px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .address-item {
      padding: 15px;
      border-bottom: 1px solid #f5f7fa;
      position: relative;
    }
    
    .address-item:last-child {
      border-bottom: none;
    }
    
    .address-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    
    .address-name {
      font-weight: 600;
      font-size: 16px;
    }
    
    .address-phone {
      color: #666;
      font-size: 14px;
    }
    
    .address-content {
      color: #333;
      font-size: 14px;
      line-height: 1.4;
      margin-bottom: 10px;
    }
    
    .address-footer {
      display: flex;
      justify-content: space-between;
    }
    
    .address-tag {
      display: inline-block;
      padding: 2px 6px;
      background-color: #e3f2fd;
      color: #2196f3;
      border-radius: 4px;
      font-size: 12px;
    }
    
    .address-actions {
      display: flex;
      gap: 10px;
    }
    
    .address-action {
      background: none;
      border: none;
      color: #666;
      font-size: 14px;
      cursor: pointer;
    }
    
    .address-action.edit {
      color: #2196f3;
    }
    
    .address-action.delete {
      color: #f44336;
    }
    
    /* 表单样式 */
    .form-group {
      margin-bottom: 15px;
    }
    
    .form-label {
      display: block;
      margin-bottom: 6px;
      font-size: 14px;
      font-weight: 500;
    }
    
    .form-control {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 15px;
      box-sizing: border-box;
    }
    
    .form-control:focus {
      outline: none;
      border-color: #2196f3;
      box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
    }
    
    .form-hint {
      margin-top: 5px;
      font-size: 12px;
      color: #999;
    }
    
    .form-row {
      display: flex;
      gap: 10px;
    }
    
    .form-col {
      flex: 1;
    }
    
    .radio-group {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    
    .radio-item {
      flex: 1;
      min-width: calc(50% - 5px);
    }
    
    .radio-input {
      display: none;
    }
    
    .radio-label {
      display: block;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
    }
    
    .radio-input:checked + .radio-label {
      border-color: #2196f3;
      background-color: #e3f2fd;
      color: #2196f3;
    }
    
    .btn {
      display: block;
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .btn-primary {
      background-color: #2196f3;
      color: white;
    }
    
    .btn-primary:hover {
      background-color: #1976d2;
    }
    
    .btn-secondary {
      background-color: #f5f7fa;
      color: #333;
      margin-top: 10px;
    }
    
    .btn-secondary:hover {
      background-color: #e9ecef;
    }
    
    /* 样式1 - 标准表单 */
    .standard-form {
      background-color: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    /* 样式2 - 分步表单 */
    .step-form {
      background-color: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .step-indicator {
      display: flex;
      justify-content: space-between;
      margin-bottom: 25px;
      position: relative;
    }
    
    .step-indicator::before {
      content: '';
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      height: 2px;
      background-color: #eee;
      z-index: 1;
    }
    
    .step {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: #fff;
      border: 2px solid #eee;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      position: relative;
      z-index: 2;
    }
    
    .step.active {
      background-color: #2196f3;
      border-color: #2196f3;
      color: white;
    }
    
    .step.completed {
      background-color: #2196f3;
      border-color: #2196f3;
      color: white;
    }
    
    .step-content {
      display: none;
    }
    
    .step-content.active {
      display: block;
      animation: fadeIn 0.3s;
    }
    
    .step-actions {
      display: flex;
      gap: 10px;
      margin-top: 20px;
    }
    
    .step-btn {
      flex: 1;
      padding: 12px;
    }
    
    /* 样式3 - 简洁表单 */
    .simple-form {
      background-color: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .simple-form .form-control {
      padding: 14px;
      font-size: 16px;
    }
    
    .simple-form .form-group {
      margin-bottom: 18px;
    }
    
    .simple-form .form-label {
      font-size: 15px;
    }
    
    /* 样式4 - 标签式表单 */
    .tab-form {
      background-color: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .form-tabs {
      display: flex;
      border-bottom: 1px solid #eee;
    }
    
    .form-tab {
      flex: 1;
      padding: 12px;
      text-align: center;
      font-size: 15px;
      font-weight: 500;
      color: #666;
      cursor: pointer;
    }
    
    .form-tab.active {
      color: #2196f3;
      border-bottom: 2px solid #2196f3;
    }
    
    .tab-content {
      padding: 20px;
      display: none;
    }
    
    .tab-content.active {
      display: block;
      animation: fadeIn 0.3s;
    }
    
    /* 地址类型选择 */
    .address-type {
      display: flex;
      margin-bottom: 20px;
      gap: 10px;
    }
    
    .type-item {
      flex: 1;
      padding: 12px 0;
      text-align: center;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .type-item.active {
      border-color: #2196f3;
      background-color: #e3f2fd;
      color: #2196f3;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
    
    /* 动画 */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    /* 添加地址按钮 */
    .add-address-btn {
      background-color: #fff;
      border: 1px dashed #2196f3;
      color: #2196f3;
      padding: 15px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 16px;
      cursor: pointer;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">添加地址</h1>
    <a href="#" class="nav-btn primary" id="saveBtn">保存</a>
  </nav>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="standard">标准表单</div>
      <div class="style-tab" data-style="step">分步表单</div>
      <div class="style-tab" data-style="simple">简洁表单</div>
      <div class="style-tab" data-style="tab">标签式表单</div>
    </div>
  </div>
  
  <!-- 已有地址列表 -->
  <div class="address-page" id="common">
    <div class="address-list">
      <div class="address-item">
        <div class="address-header">
          <div class="address-name">张三</div>
          <div class="address-phone">138****6789</div>
        </div>
        <div class="address-content">
          北京市朝阳区建国路88号现代城5号楼2301室（近地铁1号线国贸站）
        </div>
        <div class="address-footer">
          <div class="address-tag">默认地址</div>
          <div class="address-actions">
            <button class="address-action edit" data-style="standard">编辑</button>
            <button class="address-action delete">删除</button>
          </div>
        </div>
      </div>
      
      <div class="address-item">
        <div class="address-header">
          <div class="address-name">张三</div>
          <div class="address-phone">138****6789</div>
        </div>
        <div class="address-content">
          上海市浦东新区张江高科技园区博云路2号浦软大厦10层
        </div>
        <div class="address-footer">
          <div class="address-tag">工作地址</div>
          <div class="address-actions">
            <button class="address-action edit" data-style="standard">编辑</button>
            <button class="address-action delete">删除</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式1 - 标准表单 -->
  <div class="address-page active" id="standard">
    <div class="standard-form">
      <div class="form-group">
        <label class="form-label">收件人</label>
        <input type="text" class="form-control" placeholder="请输入收件人姓名">
      </div>
      
      <div class="form-group">
        <label class="form-label">手机号码</label>
        <input type="tel" class="form-control" placeholder="请输入手机号码">
        <div class="form-hint">请输入正确的手机号码，以便接收快递通知</div>
      </div>
      
      <div class="form-group">
        <label class="form-label">所在地区</label>
        <div class="form-row">
          <div class="form-col">
            <select class="form-control">
              <option value="">省份</option>
              <option value="1">北京市</option>
              <option value="2">上海市</option>
              <option value="3">广东省</option>
            </select>
          </div>
          <div class="form-col">
            <select class="form-control">
              <option value="">城市</option>
              <option value="1">北京市</option>
              <option value="2">上海市</option>
              <option value="3">广州市</option>
            </select>
          </div>
          <div class="form-col">
            <select class="form-control">
              <option value="">区县</option>
              <option value="1">朝阳区</option>
              <option value="2">海淀区</option>
              <option value="3">东城区</option>
            </select>
          </div>
        </div>
      </div>
      
      <div class="form-group">
        <label class="form-label">详细地址</label>
        <textarea class="form-control" rows="3" placeholder="请输入详细地址，如街道、门牌号等"></textarea>
        <div class="form-hint">请尽量详细填写，以便准确送达</div>
      </div>
      
      <div class="form-group">
        <label class="form-label">地址标签</label>
        <div class="radio-group">
          <div class="radio-item">
            <input type="radio" name="tag" id="tag1" class="radio-input">
            <label for="tag1" class="radio-label">默认地址</label>
          </div>
          <div class="radio-item">
            <input type="radio" name="tag" id="tag2" class="radio-input">
            <label for="tag2" class="radio-label">家庭地址</label>
          </div>
          <div class="radio-item">
            <input type="radio" name="tag" id="tag3" class="radio-input">
            <label for="tag3" class="radio-label">工作地址</label>
          </div>
          <div class="radio-item">
            <input type="radio" name="tag" id="tag4" class="radio-input">
            <label for="tag4" class="radio-label">其他地址</label>
          </div>
        </div>
      </div>
      
      <button class="btn btn-primary" id="saveStandardBtn">保存地址</button>
      <button class="btn btn-secondary" id="cancelStandardBtn">取消</button>
    </div>
  </div>
  
  <!-- 样式2 - 分步表单 -->
  <div class="address-page" id="step">
    <div class="step-form">
      <div class="step-indicator">
        <div class="step active" data-step="1">1</div>
        <div class="step" data-step="2">2</div>
        <div class="step" data-step="3">3</div>
      </div>
      
      <!-- 步骤1：基本信息 -->
      <div class="step-content active" data-step="1">
        <div class="form-group">
          <label class="form-label">收件人</label>
          <input type="text" class="form-control" placeholder="请输入收件人姓名">
        </div>
        
        <div class="form-group">
          <label class="form-label">手机号码</label>
          <input type="tel" class="form-control" placeholder="请输入手机号码">
        </div>
        
        <div class="step-actions">
          <div class="form-col"></div>
          <button class="btn btn-primary step-btn next-step">下一步</button>
        </div>
      </div>
      
      <!-- 步骤2：地址信息 -->
      <div class="step-content" data-step="2">
        <div class="form-group">
          <label class="form-label">所在地区</label>
          <div class="form-row">
            <div class="form-col">
              <select class="form-control">
                <option value="">省份</option>
                <option value="1">北京市</option>
                <option value="2">上海市</option>
              </select>
            </div>
            <div class="form-col">
              <select class="form-control">
                <option value="">城市</option>
                <option value="1">北京市</option>
                <option value="2">上海市</option>
              </select>
            </div>
            <div class="form-col">
              <select class="form-control">
                <option value="">区县</option>
                <option value="1">朝阳区</option>
                <option value="2">海淀区</option>
              </select>
            </div>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">详细地址</label>
          <textarea class="form-control" rows="3" placeholder="请输入详细地址"></textarea>
        </div>
        
        <div class="step-actions">
          <button class="btn btn-secondary step-btn prev-step">上一步</button>
          <button class="btn btn-primary step-btn next-step">下一步</button>
        </div>
      </div>
      
      <!-- 步骤3：地址设置 -->
      <div class="step-content" data-step="3">
        <div class="form-group">
          <label class="form-label">地址标签</label>
          <div class="radio-group">
            <div class="radio-item">
              <input type="radio" name="step-tag" id="step-tag1" class="radio-input" checked>
              <label for="step-tag1" class="radio-label">默认地址</label>
            </div>
            <div class="radio-item">
              <input type="radio" name="step-tag" id="step-tag2" class="radio-input">
              <label for="step-tag2" class="radio-label">家庭地址</label>
            </div>
            <div class="radio-item">
              <input type="radio" name="step-tag" id="step-tag3" class="radio-input">
              <label for="step-tag3" class="radio-label">工作地址</label>
            </div>
            <div class="radio-item">
              <input type="radio" name="step-tag" id="step-tag4" class="radio-input">
              <label for="step-tag4" class="radio-label">其他地址</label>
            </div>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">备注信息（选填）</label>
          <input type="text" class="form-control" placeholder="如：门口鞋柜旁、快递柜等">
        </div>
        
        <div class="step-actions">
          <button class="btn btn-secondary step-btn prev-step">上一步</button>
          <button class="btn btn-primary step-btn" id="saveStepBtn">完成并保存</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式3 - 简洁表单 -->
  <div class="address-page" id="simple">
    <div class="simple-form">
      <div class="form-group">
        <label class="form-label">收件人及电话</label>
        <input type="text" class="form-control" placeholder="例如：张三 13800138000">
      </div>
      
      <div class="form-group">
        <label class="form-label">所在地区</label>
        <select class="form-control">
          <option value="">请选择省/市/区</option>
          <option value="1">北京市-北京市-朝阳区</option>
          <option value="2">上海市-上海市-浦东新区</option>
          <option value="3">广东省-广州市-天河区</option>
        </select>
      </div>
      
      <div class="form-group">
        <label class="form-label">详细地址</label>
        <textarea class="form-control" rows="2" placeholder="街道、门牌号、小区、楼栋、单元室等"></textarea>
      </div>
      
      <div class="form-group">
        <label class="form-label">地址类型</label>
        <div class="address-type">
          <div class="type-item active">默认</div>
          <div class="type-item">家庭</div>
          <div class="type-item">工作</div>
        </div>
      </div>
      
      <button class="btn btn-primary" id="saveSimpleBtn">保存地址</button>
    </div>
  </div>
  
  <!-- 样式4 - 标签式表单 -->
  <div class="address-page" id="tab">
    <div class="tab-form">
      <div class="form-tabs">
        <div class="form-tab active" data-tab="personal">个人地址</div>
        <div class="form-tab" data-tab="company">公司地址</div>
      </div>
      
      <!-- 个人地址 -->
      <div class="tab-content active" data-tab="personal">
        <div class="form-group">
          <label class="form-label">收件人</label>
          <input type="text" class="form-control" placeholder="请输入您的姓名">
        </div>
        
        <div class="form-group">
          <label class="form-label">手机号码</label>
          <input type="tel" class="form-control" placeholder="请输入您的手机号码">
        </div>
        
        <div class="form-group">
          <label class="form-label">家庭住址</label>
          <div class="form-row">
            <div class="form-col">
              <select class="form-control">
                <option value="">省份</option>
                <option value="1">北京市</option>
                <option value="2">上海市</option>
              </select>
            </div>
            <div class="form-col">
              <select class="form-control">
                <option value="">城市</option>
                <option value="1">北京市</option>
                <option value="2">上海市</option>
              </select>
            </div>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">详细地址</label>
          <textarea class="form-control" rows="2" placeholder="请输入详细家庭地址"></textarea>
        </div>
        
        <div class="form-group">
          <div class="form-row">
            <div class="form-col">
              <label class="form-label">邮政编码</label>
              <input type="text" class="form-control" placeholder="选填">
            </div>
            <div class="form-col">
              <label class="form-label">设置为默认地址</label>
              <div>
                <input type="checkbox" id="defaultPersonal" style="width: 16px; height: 16px; margin-top: 5px;">
                <label for="defaultPersonal" style="margin-left: 5px; font-size: 14px;">是</label>
              </div>
            </div>
          </div>
        </div>
        
        <button class="btn btn-primary" id="savePersonalBtn">保存个人地址</button>
      </div>
      
      <!-- 公司地址 -->
      <div class="tab-content" data-tab="company">
        <div class="form-group">
          <label class="form-label">收件人</label>
          <input type="text" class="form-control" placeholder="请输入收件人姓名">
        </div>
        
        <div class="form-group">
          <label class="form-label">手机号码</label>
          <input type="tel" class="form-control" placeholder="请输入联系电话">
        </div>
        
        <div class="form-group">
          <label class="form-label">公司名称</label>
          <input type="text" class="form-control" placeholder="请输入公司名称">
        </div>
        
        <div class="form-group">
          <label class="form-label">公司地址</label>
          <div class="form-row">
            <div class="form-col">
              <select class="form-control">
                <option value="">省份</option>
                <option value="1">北京市</option>
                <option value="2">上海市</option>
              </select>
            </div>
            <div class="form-col">
              <select class="form-control">
                <option value="">城市</option>
                <option value="1">北京市</option>
                <option value="2">上海市</option>
              </select>
            </div>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">详细地址</label>
          <textarea class="form-control" rows="2" placeholder="请输入详细公司地址，包括楼层、部门等"></textarea>
        </div>
        
        <div class="form-group">
          <label class="form-label">设置为默认地址</label>
          <div>
            <input type="checkbox" id="defaultCompany" style="width: 16px; height: 16px; margin-top: 5px;">
            <label for="defaultCompany" style="margin-left: 5px; font-size: 14px;">是</label>
          </div>
        </div>
        
        <button class="btn btn-primary" id="saveCompanyBtn">保存公司地址</button>
      </div>
    </div>
  </div>
  
  <!-- 添加地址按钮 -->
  <div class="add-address-btn" id="addNewBtn">
    <i class="fa fa-plus"></i>
    <span>添加新地址</span>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const addressPages = document.querySelectorAll('.address-page');
    const backBtn = document.getElementById('backBtn');
    const saveBtn = document.getElementById('saveBtn');
    const toast = document.getElementById('toast');
    const addNewBtn = document.getElementById('addNewBtn');
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        addressPages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 分步表单导航
    const nextButtons = document.querySelectorAll('.next-step');
    const prevButtons = document.querySelectorAll('.prev-step');
    const steps = document.querySelectorAll('.step');
    const stepContents = document.querySelectorAll('.step-content');
    
    nextButtons.forEach(btn => {
      btn.addEventListener('click', function() {
        const currentStep = parseInt(this.closest('.step-content').getAttribute('data-step'));
        if (currentStep < 3) {
          // 更新步骤指示器
          steps.forEach(step => {
            const stepNum = parseInt(step.getAttribute('data-step'));
            if (stepNum === currentStep) {
              step.classList.remove('active');
              step.classList.add('completed');
            } else if (stepNum === currentStep + 1) {
              step.classList.add('active');
            }
          });
          
          // 更新内容区域
          stepContents.forEach(content => {
            content.classList.remove('active');
          });
          document.querySelector(`.step-content[data-step="${currentStep + 1}"]`).classList.add('active');
        }
      });
    });
    
    prevButtons.forEach(btn => {
      btn.addEventListener('click', function() {
        const currentStep = parseInt(this.closest('.step-content').getAttribute('data-step'));
        if (currentStep > 1) {
          // 更新步骤指示器
          steps.forEach(step => {
            const stepNum = parseInt(step.getAttribute('data-step'));
            if (stepNum === currentStep) {
              step.classList.remove('active');
            } else if (stepNum === currentStep - 1) {
              step.classList.remove('completed');
              step.classList.add('active');
            }
          });
          
          // 更新内容区域
          stepContents.forEach(content => {
            content.classList.remove('active');
          });
          document.querySelector(`.step-content[data-step="${currentStep - 1}"]`).classList.add('active');
        }
      });
    });
    
    // 标签式表单切换
    const formTabs = document.querySelectorAll('.form-tab');
    const tabContents = document.querySelectorAll('.tab-content');
    
    formTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        const tabName = this.getAttribute('data-tab');
        
        // 更新标签
        formTabs.forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        
        // 更新内容
        tabContents.forEach(content => {
          content.classList.remove('active');
        });
        document.querySelector(`.tab-content[data-tab="${tabName}"]`).classList.add('active');
      });
    });
    
    // 简洁表单地址类型选择
    const typeItems = document.querySelectorAll('.type-item');
    typeItems.forEach(item => {
      item.addEventListener('click', function() {
        typeItems.forEach(i => i.classList.remove('active'));
        this.classList.add('active');
      });
    });
    
    // 保存按钮事件
    saveBtn.addEventListener('click', function() {
      showToast('地址保存成功');
    });
    
    document.getElementById('saveStandardBtn').addEventListener('click', function() {
      showToast('标准表单地址保存成功');
    });
    
    document.getElementById('saveStepBtn').addEventListener('click', function() {
      showToast('分步表单地址保存成功');
    });
    
    document.getElementById('saveSimpleBtn').addEventListener('click', function() {
      showToast('简洁表单地址保存成功');
    });
    
    document.getElementById('savePersonalBtn').addEventListener('click', function() {
      showToast('个人地址保存成功');
    });
    
    document.getElementById('saveCompanyBtn').addEventListener('click', function() {
      showToast('公司地址保存成功');
    });
    
    // 取消按钮事件
    document.getElementById('cancelStandardBtn').addEventListener('click', function() {
      showToast('已取消');
    });
    
    // 添加新地址按钮
    addNewBtn.addEventListener('click', function() {
      // 切换到标准表单
      styleTabs.forEach(t => t.classList.remove('active'));
      addressPages.forEach(page => page.classList.remove('active'));
      
      document.querySelector('.style-tab[data-style="standard"]').classList.add('active');
      document.getElementById('standard').classList.add('active');
      
      showToast('添加新地址');
    });
    
    // 编辑地址
    const editButtons = document.querySelectorAll('.address-action.edit');
    editButtons.forEach(btn => {
      btn.addEventListener('click', function() {
        const style = this.getAttribute('data-style');
        
        // 切换到对应表单
        styleTabs.forEach(t => t.classList.remove('active'));
        addressPages.forEach(page => page.classList.remove('active'));
        
        document.querySelector(`.style-tab[data-style="${style}"]`).classList.add('active');
        document.getElementById(style).classList.add('active');
        
        showToast('编辑地址');
      });
    });
    
    // 删除地址
    const deleteButtons = document.querySelectorAll('.address-action.delete');
    deleteButtons.forEach(btn => {
      btn.addEventListener('click', function() {
        if (confirm('确定要删除这个地址吗？')) {
          this.closest('.address-item').remove();
          showToast('地址已删除');
        }
      });
    });
    
    // 返回按钮
    backBtn.addEventListener('click', function() {
      showToast('返回上一页');
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => {
          toast.style.display = 'none';
          toast.style.opacity = '1';
        }, 300);
      }, 2000);
    }
  </script>
</body>
</html>
